{{extend 'layout.html'}}

<style>
input[type=text], input[type=password], textarea
{
    width: 250px;  
}

h2,h3
{
    text-align: center;
}

</style>

<script type="text/javascript">

jQuery(document).ready(function()
{
    jQuery(window).bind('resize', function()
    {
        jQuery("#grid").setGridWidth(jQuery('#content').width());
    }).trigger('resize');
    
    jQuery("#grid").jqGrid(
    {
        url:'{{=URL(r = request, f = 'call', args = ['json', 'getProjects', 'all'])}}',
        data: "{}",
        datatype: 'json',
        mtype: 'GET',
        contentType: "application/json; charset=utf-8",
        colNames:['Project Name'],
        colModel :[ 
          {name: 'name', index: 'name', align: 'center'} 
        ],
        pager: '#pager',
        rowNum:25,
        rowList:[25, 50, 100],
        sortname: 'name',
        sortorder: 'asc',
        viewrecords: true,
        autowidth: true,
        height: "100%",
        rownumbers: true,
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id)
        {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_" + subgrid_table_id;
            jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='"+ pager_id + "' class='scroll'></div>");
            jQuery("#" + subgrid_table_id).jqGrid(
            {
                url:'{{=URL(r = request, f = 'call', args = ['json','getTodoInfo'])}}/all-' + row_id,
                datatype: "json",
                colNames:['Title', 'Description','Deadline', 'Status', 'Assigned To','Comment'],
                colModel :[ 
                  {name:'title', index:'title', editable:true},
                  {name:'description', index:'description', editable:true}, 
                  {name:'completion_date', index:'completion_date',sorttype:"date", editable:true, width: 55, align: 'center'},
                  {name:'status', index:'status', editable:true, width: 45},
                  {name:'assignee', index:'assignee', width: 65},
                  {name:'comment', index:'comment',width: 30,align: 'center'}
                ],
                rowNum:20,
                rownumbers: true,
                pager: pager_id,
                height: '100%',
                autowidth: true,
                viewrecords: true
            });

            jQuery("#" + subgrid_table_id).jqGrid('navGrid',"#" + pager_id,
                    {edit: false, add: false, del: false, search: false,
                     refresh: false}
                  ).jqGrid('navButtonAdd',
                           '#' + pager_id,
                           {caption: "Add Todo",
                            onClickButton: function()
                            {
                                window.location.href = '{{=URL(r = request, f = 'addtodos')}}/' + row_id;
                            },
                            position: "last",
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#' + pager_id,
                           {caption: "Edit Todo",
                            onClickButton: function()
                            {
                                var row = jQuery("#" + subgrid_table_id).jqGrid('getGridParam', 'selrow');
                                if (null != row)
                                {
                                    window.location.href = '{{=URL(r = request, f = 'edittodos')}}/' + row;
                                }
                                else
                                {
                                    alert('Please Select A Row.');
                                }
                            },
                            position: "last",
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#' + pager_id,
                           {caption: "Add Comment",
                            onClickButton: function()
                            {
                                var row = jQuery("#" + subgrid_table_id).jqGrid('getGridParam', 'selrow');
                                if (null != row)
                                {
                                    window.location.href = '{{=URL(r = request, f = 'commenttodos')}}/' + row;
                                }
                                else
                                {
                                    alert('Please Select A Row.');
                                }
                            },
                            position: "last",
                            title: ""});

            jQuery(window).bind('resize', function()
            {
                jQuery("#" + subgrid_table_id).setGridWidth(jQuery('#grid').width() - 55);
            }).trigger('resize');
        },
        caption: 'Projects'
    }); 

    jQuery("#grid").jqGrid('navGrid',
                           '#pager',
                           {edit: false,
                            add: false,
                            del: false,
                            search: false,
                            refresh: false}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Add Project",
                            onClickButton: function()
                            {
                                window.location.href = "{{=URL(r = request, f = 'addproject')}}";
                            },
                            position: "first",
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Project Details",
                            onClickButton: function()
                            {
                                var row = jQuery("#grid").jqGrid('getGridParam', 'selrow');
                                if (null != row)
                                {
                                    window.location.href = '{{=URL(r = request, f = 'projectinfo')}}/' + row;
                                }
                                else
                                {
                                    alert('Please Select A Row.');
                                }

                            },
                            position: "last",
                            title: ""});
}); 
</script>

<h3>All Projects and ToDos</h3>
<p>
<table id="grid"></table> 
<div id="pager"></div>
